<template>
  <view class="pagebox">
	  <!-- #ifdef MP || APP-PLUS -->
	  <NavBar titleText="区域统计" :iconColor="iconColor" :textColor="iconColor" :bagColor="bagColor" :isScrolling="isScrolling" showBack></NavBar>
	  <!-- #endif -->
	  <view class="headerBg">
	  	<view :style="{ height: `${getHeight.barTop}px` }"></view>
	  	<view :style="{ height: `${getHeight.barHeight}px` }"></view>
	  	<view class="inner"></view>
	  </view>
	  <view class="search fixed z-10 acea-row row-between-wrapper w-full h-98 pl-20 pr-20">
	  	<view class="acea-row row-middle row-around w-480 h-50 rd-24px bg-w111-F5F5F5-10 fs-24 text--w111-fff">
	  		<view class="w-88 h-50 acea-row row-center-wrapper" :class="current==index?'active':''" v-for="(item, index) in dataList" :key="index" @click="dataTap(index)">{{item.name}}</view>
	  	</view>
	  	<view class="fs-24 text--w111-fff acea-row row-middle" @click="storeTap">
			<view class="w-170 line1 text-right">{{storeName}}</view>
			<text>({{storeData.length-1}})</text>
			<text class="iconfont icon-ic_rightarrow fs-24"></text>
		</view>
	  </view>
	  <view class="relative w-710 rd-24rpx bg--w111-fff m-auto mt-98 pt-40">
		  <view class="acea-row row-around row-middle text--w111-999 fs-24">
			  <view v-for="(item, index) in headerData" :key="index" @click="tapHeader(index)">
				  <view :class="currentHeader==index?'text-w111-2A7EFB':''">{{item.title}}</view>
				  <view class="fs-36 SemiBold mt-12" :class="currentHeader==index?'text-w111-2A7EFB':'text--w111-333'">{{item.number}}</view>
				  <view class="acea-row row-middle mt-12">
					  <text>同比</text>
					  <view class="ml-8 acea-row row-middle" :class="item.growth_rate>=0?'text--w111-e93323':'text-w111-00B42A'">
						  <text class="iconfont fs-18 mr-2 mt-2" :class="item.growth_rate>=0?'icon-ic_up2':'icon-ic_down2'"></text>{{item.growth_rate}}%
					  </view>
				  </view>
			  </view>
		  </view>
		  <view class="charts mt-58">
		    <qiun-data-charts 
		      type="area"
		      :opts="optsArea"
		      :chartData="chartDataArea"
		      :canvas2d="true"
			  :loadingType='0'
			  :inScrollView='true'
			  :onmovetip='true'
			  :ontouch='true'
			  :tapLegend='false'
		      canvasId="vLLUOHjjWETeACUnaGqqvjTsnrZjPkVi"
		    />
		  </view>
	  </view>
	  <view class="w-710 rd-16rpx bg--w111-fff m-auto mt-20 pl-24 pr-24 pt-32" v-if="roundCake">
		  <view class="fs-30 text-w111-303133 PingFang fw-500 mb-24">销售占比</view>
		  <view class="charts">
		      <qiun-data-charts 
		        type="ring"
		        :opts="opts"
		        :chartData="chartData"
		        :canvas2d="true"
		        canvasId="uXvvYBFpOeneDbDEzQEqVbhZuilumxlI"
		      />
		  </view>
	  </view>
	  <view class="w-710 rd-16rpx bg--w111-fff m-auto mt-20 pl-24 pr-24 pt-32" v-if="ranking.length">
		  <view class="fs-30 text-w111-303133 PingFang fw-500 mb-24">门店排行榜</view>
		  <view class="fs-24 text--w111-999 acea-row row-around row-middle">
		  	<view class="w-198 line1">门店名称</view>
		  	<view class="w-170 acea-row row-middle" @click="rankTap('pay_price')">
				<view>营业额(¥)</view>
				<view class="w-28 text-center pt-4">
					<view class="iconfont icon-ic_up2 fs-12" :class="orderby=='pay_price asc'?'text-w111-1890FF':''"></view>
					<view class="iconfont icon-ic_down2 fs-12" :class="orderby=='pay_price desc'?'text-w111-1890FF':''"></view>
				</view>
			</view>
		  	<view class="flex-1 acea-row row-middle" @click="rankTap('order_number')">
				<view>销量</view>
				<view class="w-28 text-center pt-4">
					<view class="iconfont icon-ic_up2 fs-12" :class="orderby=='order_number asc'?'text-w111-1890FF':''"></view>
					<view class="iconfont icon-ic_down2 fs-12" :class="orderby=='order_number desc'?'text-w111-1890FF':''"></view>
				</view>
			</view>
		  	<view class="w-170 text-right acea-row row-middle row-right" @click="rankTap('unit_price')">
				<view>客单价(¥)</view>
				<view class="w-28 text-center pt-4">
					<view class="iconfont icon-ic_up2 fs-12" :class="orderby=='unit_price asc'?'text-w111-1890FF':''"></view>
					<view class="iconfont icon-ic_down2 fs-12" :class="orderby=='unit_price desc'?'text-w111-1890FF':''"></view>
				</view>
			</view>
		  </view>
		  <view>
		  	<view v-for="(item, index) in ranking" :key="index" class="fs-22 text--w111-333 h-70 border-b border-b-s b-w111-F1F1F1 acea-row row-around row-middle">
		  		<view class="w-198 line1">{{item.name}}</view>
		  		<view class="w-170">{{item.number}}</view>
		  		<view class="flex-1">{{item.sales}}</view>
		  		<view class="w-170 text-right">{{item.unit_price}}</view>
		  	</view>
		  </view>
	  </view>
	  <view class="footer"></view>
	  <base-drawer mode="top" :visible="dataShow" background-color="transparent" zIndex='9' maskZIndex='8' mask maskClosable @close="closeData">
		  <view class="w-full bg--w111-fff rd-b-32rpx pl-20 pr-20 pb-52">
			  <!-- #ifdef MP || APP-PLUS -->
			  <view :style="{ height: `${getHeight.barTop}px` }"></view>
			  <view :style="{ height: `${getHeight.barHeight}px` }"></view>
			   <!-- #endif -->
			  <view class="h-98"></view>
			  <view class="acea-row row-between-wrapper mt-48" @click="dataPickerTap">
				  <view class="w-340 h-64 bg--w111-f5f5f5 rd-50rpx fs-24 text--w111-ccc acea-row row-center-wrapper">
					  <text class="text--w111-333" v-if="customizeData.length">{{customizeData[0]}}</text>
					  <text v-else>开始时间</text>
				  </view>
				  -
				  <view class="w-340 h-64 bg--w111-f5f5f5 rd-50rpx fs-24 text--w111-ccc acea-row row-center-wrapper">
					  <text class="text--w111-333" v-if="customizeData.length">{{customizeData[1]}}</text>
					  <text v-else>结束时间</text>
				  </view>
			  </view>
			  <view class="acea-row row-between-wrapper mt-48">
				  <view class="w-346 h-72 rd-50rpx border-2A7EFB-2 fs-26 text-w111-2A7EFB acea-row row-center-wrapper" @click="closeData">取消</view>
				  <view class="w-348 h-72 rd-50rpx bg-w111-2A7EFB fs-26 text--w111-fff acea-row row-center-wrapper" @click="confirmData">确定</view>
			  </view>
		  </view>
	  </base-drawer>
	  <uni-datetime-picker ref="dataPicker" type="daterange" @change='changeData'>
		  <view></view>
	  </uni-datetime-picker>
	  <storeList ref="storeList" :storeData='storeData' :storeShow='storeShow' @OnChangeStore='OnChangeStore' @changeClose='changeClose'></storeList>
  </view>
</template>
<script>
// #ifdef MP || APP-PLUS
import NavBar from '@/components/NavBar.vue';
// #endif
import storeList from '../components/storeList/index.vue';
import {getAgentHeader, getAgentOrder, getAgentStore, getStoreList} from "@/api/admin";
import qiunDataCharts from '../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
export default {
  name: 'agent',
  components: {
	storeList,
	qiunDataCharts,
  	// #ifdef MP ||APP-PLUS
  	NavBar,
  	// #endif
  },
  data() {
    return {
	  chartDataArea:{},
	  optsArea:{
		animation: true,
		background: "#FFFFFF",
		color: ["#1890FF"],
		padding: [15,15,15,15],
		enableScroll: true,
		scrollPosition:'left',
		legend: {},
		xAxis: {
		  disableGrid: true,
		  itemCount: 6,
		  scrollShow: true,
		  scrollAlign: 'left',
		  fontSize: 11,
		  fontColor:'#666',
		  marginTop: 3,
		  scrollColor:'#ccc',
		},
		yAxis: {
		  gridType: "dash",
		  dashLength: 2,
		  showTitle: true,
		  gridColor:'#D8D8D8',
		  data: [{
		  	calibration: true,
		  	position: 'left',
		  	title: this.currentHeader==1?'':'单位(元)',
		  	titleFontSize: 11,
		  	titleOffsetY:-5,
		  	titleFontColor:'#999',
		  	fontColor:'#666',
		  	fontSize: 11,
		  	axisLineColor:'#D8D8D8',
		  	format: (val) => {
		  		return val.toFixed(0)
		  	}
		  }, ],
		},
		extra: {
		  area: {
		    type: "curve",
		    opacity: 0.2,
		    addLine: true,
		    width: 2,
		    gradient: true,
		    activeType: "hollow"
		  },
		  tooltip: {
		  	// showCategory: true,
		  	showArrow: false,
		  	borderRadius: 6,
		  	bgColor:'#323131',
		  	bgOpacity: 0.6,
		  	fontSize: 12,
		  	legendShape: 'circle'
		  }
		}
	  },
	  chartData:{},
	  opts:{
		animation: true,
		rotate: false,
		rotateLock: false,
		background: "#FFFFFF",
		color: ["#2D8CF0","#21CCFF","#FF9900","#FFCD27","#F95C96","#ED4014"],
		padding: [5,5,5,5],
		dataLabel: true,
		enableScroll: false,
		legend: {
		  show: true,
		  position: "bottom",
		  lineHeight: 25
		},
		title: {
			name: ""
		},
		subtitle: {
			name: ""
		},
		extra: {
		  ring: {
		    ringWidth: 30,
		    activeOpacity: 0.5,
		    activeRadius: 10,
		    offsetAngle: 0,
		    labelWidth: 15,
		    border: false,
		    borderWidth: 3,
		    borderColor: "#FFFFFF"
		  }
		}
	  },
	  bagColor: 'linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%)',
	  iconColor: '#FFFFFF',
	  isScrolling: false,
	  getHeight: this.$util.getWXStatusHeight(),
	  dataList: [
		  {name:'今天'},
		  {name:'昨天'},
		  {name:'本周'},
		  {name:'本月'},
		  {name:'自定义'}
	  ],
	  current:0,
	  headerData:[],
	  currentHeader:0,
	  storeData:[],
	  storeShow:false,
	  ranking:[],
	  orderby:'', //排序参数升序序 asc 降序 desc
	  storeId:0,
	  storeName:'全部门店',
	  dataShow:false,
	  dataRange:'',
	  roundCake:false, //圆饼统计图是否存在
	  customizeData:[]
    };
  },
  onLoad() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(710);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
	let todayRange = this.$util.getCurrentTodayRange();
	this.dataRange = todayRange.start+'-'+todayRange.end;
	this.storeList();
	this.agentHeader();
	this.agentOrder();
    this.agentStore();
  },
  methods: {
	changeData(e){
		this.customizeData = e;
		let start = e[0].split('-');
		let end = e[1].split('-');
		this.dataRange = `${start[0]}/${start[1]}/${start[2]}`+'-'+`${end[0]}/${end[1]}/${end[2]}`;
		this.dataShow = false;
		this.agentOrder();
		this.agentStore();
		this.agentHeader();
	},
	dataPickerTap(){
		this.$refs.dataPicker.show();
	},
	closeData(){
		this.dataShow = false;
	},
	confirmData(){
		this.dataShow = false;
	},
	storeTap(){
		this.storeShow = !this.storeShow;
		this.dataShow = false;
	},
	changeClose(){
		this.storeShow = false;
	},
	storeList() {
		getStoreList().then(res=>{
			res.data.unshift({
				id:0,
				name:'全部门店'
			});
			this.storeData = res.data;
		}).catch(err=>{
			this.$util.Tips({
				title: err
			})
		})
	},
	OnChangeStore(row){
		this.storeId = row.id;
		this.storeName = row.name;
		this.storeShow = false;
		this.agentHeader();
		this.agentOrder();
	},
	agentHeader(){
		let data = {
			store_id:this.storeId,
			data:this.dataRange
		}
		getAgentHeader(data).then(res=>{
			this.headerData = res.data;
		}).catch(err=>{
			this.$util.Tips({
				title: err
			})
		})
	},
	tapHeader(index){
		this.currentHeader = index;
		this.agentOrder();
	},
	dataTap(index){
		this.current = index;
		if(index==4){
			this.dataShow = true;
		}else{
			this.dataShow = false;
			this.customizeData = [];
			if(index==0){
				let todayRange = this.$util.getCurrentTodayRange();
				this.dataRange = todayRange.start+'-'+todayRange.end;
			}else if(index==1){
				let yesterday = this.$util.getCurrentYesterdayRange();
				this.dataRange = yesterday.start+'-'+yesterday.end;
			}else if(index==2){
				let weekRange = this.$util.getCurrentWeekRange();
				this.dataRange = weekRange.start+'-'+weekRange.end;
			}else{
				let monthRange = this.$util.getCurrentMonthRange();
				this.dataRange = monthRange.start+'-'+monthRange.end;
			}
			this.agentOrder();
			this.agentStore();
			this.agentHeader();
		}
	},
	agentOrder(){
		let data = {
			type:this.currentHeader+1,
			store_id:this.storeId,
			data:this.dataRange
		}
		getAgentOrder(data).then(res=>{
			let data = res.data;
			data.series.forEach(item=>{
				item.legendShape = 'circle'
			})
			this.chartDataArea = data;
		}).catch(err=>{
			this.$util.Tips({
				title: err
			})
		})
	},
	rankTap(name){
		switch (name) {
			case 'pay_price':
			      let orderby = ''
			      if(this.orderby=='pay_price desc'){
					orderby = 'pay_price'  
				  }else if(this.orderby=='pay_price asc'){
					orderby = 'pay_price desc'   
				  }else{
					orderby = 'pay_price asc'
				  }
			      this.orderby = orderby
			      break;
			case 'order_number':
			      let orderNumber = ''
			      if(this.orderby=='order_number desc'){
			      	 orderNumber = 'order_number'  
			      }else if(this.orderby=='order_number asc'){
			      	 orderNumber = 'order_number desc'   
			      }else{
			      	 orderNumber = 'order_number asc'
			      }
			      this.orderby = orderNumber
			      break;
			case 'unit_price':
			      let orderPrice = ''
			      if(this.orderby=='unit_price desc'){
			      	 orderPrice = 'unit_price'
			      }else if(this.orderby=='unit_price asc'){
			      	 orderPrice = 'unit_price desc'   
			      }else{
			      	 orderPrice = 'unit_price asc'
			      }
			      this.orderby = orderPrice
			      break;
		}
		this.agentStore('rank');
	},
	agentStore(type) {
		let data = {
			orderby:this.orderby,
			data:this.dataRange
		}
		getAgentStore(data).then(res=>{
			if(Array.isArray(res.data)) return;
			this.ranking = res.data.ranking;
			this.roundCake = res.data.chart.bing_data.length;
			if(type !='rank'){
				let series = [];
				let data = {
					data:res.data.chart.bing_data
				}
				series.push(data)
				let obj = {
					series:series
				};
				this.chartData = obj;
			}
		}).catch(err=>{
			this.$util.Tips({
				title: err
			})
		})
	}
  },
};
</script>

<style lang="scss" scoped>
  .footer{
	  height: calc(30rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	  height: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  }
  .charts{
    width: 710rpx;
    height: 500rpx;
  }
  .pagebox {
  	position: relative;
  	overflow: hidden;
	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
	
		.inner {
			height: 356rpx;
		}
	}
	.search{
		background: linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
	}
	.active{
		border-radius: 120rpx;
		color: #2A7EFB;
		background: #FFFFFF;
	}
  }
</style>